<template>

  <div id="app">
    <div class="HomeView">
  

 <AsideNavBar class="AsideNav"></AsideNavBar>
    

 <MainContent class="MainContent" ></MainContent>

 

 <FooterSetting class="Footer"></FooterSetting>


  </div>
  </div>
</template>


<script>

import AsideNavBar from "./components/AsideNavigationBar/AsideNavigationBar.vue"
import MainContent from "./components/Main/MainContent.vue"
import FooterSetting from "./components/Footer/FooterSetting.vue"
export default {
  name: "App",
  components: {
   AsideNavBar,
   MainContent,
   FooterSetting
  },
}
</script>

<style>
#app{
  height: 100vh;
}
*{
margin: 0;
padding: 0;
}
.HomeView{
  
  height:100%;
 display: flex;

}
.HomeView .AsideNav,.MainContent,.Footer{
padding: 0;  
}

.AsideNav{
  flex:0 0 80px;

}
.MainContent{
  flex: 1;

}
.Footer{
flex:0 0 60px;

}
</style>
